<template>
  <div>
    <el-container class="container">
      <el-aside width="200px">
        <el-menu
            default-active="2"
            >
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-close"></i>
            <span slot="title" @click="logout">注销</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-form size="mini" ref="queryForm" inline :model="queryForm" label-width="80px">
          <el-form-item label="昵称">
            <el-input clearable v-model="queryForm.nickName" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select clearable v-model="queryForm.deptId" placeholder="请选择部门">
              <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button type="primary" @click="onAdd">添加</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="dataList"
            style="width: 100%">
          <el-table-column
              prop="userId"
              label="id"
              >
          </el-table-column>
          <el-table-column
              prop="userName"
              label="登录名"
              >
          </el-table-column>
          <el-table-column
              prop="nickName"
              label="昵称">
          </el-table-column>
          <el-table-column
              prop="deptId"
              label="部门" :formatter="(row) => deptList.find(item=>item.deptId == row.deptId).deptName">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别" :formatter="(row) => row.sex == 0 ? '男' : '女'">
          </el-table-column>
          <el-table-column
              prop="age"
              label="年龄">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-link  @click="onUpdate(scope.row)" type="primary">修改</el-link> |
              <el-link  @click="onDel(scope.row)" type="primary">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next"
            @current-change="changePage"
            :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize"
            :total="total">
        </el-pagination>

        <el-dialog width="400px" :title="title" :visible.sync="dialogFormVisible">
          <el-form size="mini" ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="账号" prop="userName">
              <el-input v-model="form.userName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="form.nickName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="form.sex" label="0">男</el-radio>
              <el-radio v-model="form.sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker
                  v-model="form.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="部门">
              <el-select clearable v-model="form.deptId" placeholder="请选择部门">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>

  </div>
</template>

<script>
  import {list, del, add, update, get} from "@/api/user";
  import {list as listDept} from '@/api/dept';

  export default {
        name: "DemoIndex",
        data() {
            return {
              dataList: [],
              deptList: [],
              queryForm: {
                pageNo: 1,
                pageSize: 2,
              },
              total: 0,
              form: {
                sex: '0',
              },
              dialogFormVisible: false,
              title: '',
              rules: {
                userName: {required: true, message: '账号不能为空', trigger: 'blur'},
                nickName: {required: true, message: '昵称不能为空', trigger: 'blur'}
              }
            }
        },
      created() {
        this.initData();
      },
      methods: {
        async initData() {
          // 等待部门列表查询完成后再加载用户列表，解决使用formatter转换部门名字时，部门列表可能还未加载的问题
          await listDept().then(res => this.deptList = res.data);
          this.getList();
        },
        getList() {
          list(this.queryForm).then(res => {
            this.total = res.data.total;
            this.dataList = res.data.records;
          })
        },
        changePage(pageNo) {
          this.queryForm.pageNo = pageNo;
          this.getList();
        },
        onQuery() {
          this.changePage(1);
        },
        onUpdate(row) {
          this.title = '修改用户';
          if (this.$refs.form) {
            this.$refs.form.clearValidate();
          }
          this.dialogFormVisible = true;
          get(row.userId).then(res => this.form = res.data);
        },
        onDel(row) {
          del(row.userId).then(() => {
            this.changePage(1);
            this.$message.success('删除成功');
          });
        },
        onAdd() {
          this.form = {sex: '0'};
          if (this.$refs.form) {
            this.$refs.form.clearValidate();
          }
          this.dialogFormVisible = true;
          this.title = '添加用户';
        },
        submitForm() {
          this.$refs.form.validate(valid => {
            if (valid) {
              if (this.form.userId) {
                update(this.form).then(res => {
                  this.$message.success('修改成功');
                  this.changePage(1);
                  this.dialogFormVisible = false;
                })
              } else {
                add(this.form).then(res => {
                  this.$message.success('添加成功');
                  this.changePage(1);
                  this.dialogFormVisible = false;
                })
              }
            }
          })
        },
        logout() {
          this.$confirm('确定注销吗？', '提示').then(() => {
            this.$message.success('注销成功');
            sessionStorage.removeItem("token");
            this.$router.push('/');
          })
        },
      }
    }
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  position: absolute;
}
</style>